<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>携程旅游</title>
		<link rel="stylesheet" type="text/css" href="js/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="less/swiper.css" />
		<link rel="stylesheet" type="text/css" href="less/1.css"/>
		
	</head>
	<body>
		<div class="app">
		<header class="header">
			<div class="h-left">
				<span class="glyphicon glyphicon-menu-left"></span>
			</div>
			<div class="h-center">
				<span class="glyphicon glyphicon-search"></span>
				<input type="text" placeholder="输入城市/景点/游玩主题"/>
			</div>
			<div class="h-right" v-on:click="btn">
				{{title}}
				<span class="glyphicon glyphicon-triangle-bottom"></span>
			</div>
		</header>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <!--<div class="swiper-slide">
		        	<img src="img/未标题-1.jpg" class="img"/>
		        </div>-->
		        
		    </div>
		     <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!--<!--<!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
 
		</div>
	    <div class="clas">
	   	   <!--<dl>
	   	   	<dt><img src=""/></dt>
	   	   	<dd></dd>
	   	   </dl>-->
	    </div>
	    <div class="hot">热销推荐</div>
	    <div class="hots">
	    	  <dl v-for="(v,i) in list">
	    		<dt><img v-bind:src=v.imgUrl></dt>
	    		<dd>
	    			<h1>{{v.title}}</h1>
	    			<p>{{v.desc}}</p>
	    			<span v-on:click = "see(i)">查看详情</span>
	    		</dd>
	    	</dl> 
	    </div>
	    <div class="hot">周末去哪儿</div>
	    <div class="week">
	    	<!--<dl>
	    		<dt><img src=""/></dt>
	    		<dd>
	    			<p></p>
	    			<span></span>
	    		</dd>
	    	</dl>-->
	    </div>
	    </div>
		<script src="js/flexible.debug.js"></script>
		<script src="js/flexible_css.debug.js"></script>
		<script src="js/js/swiper.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			 var vue1 = new Vue({
					el:".app",
					data:{
						title:"北京",
						list:"",
						mm:""
					},
				    methods:{
					   	btn:function(){
					   		location.href = "city.html"
					   	},
					   	see:function(i){
					        location.href = "detail.html"
					   	}
				   	},
				   	mounted(){
				   		 $.ajax({
						  	type:"get",
						  	url:"json/index.json",
						  	async:true,
						  	success:(res)=>{
						  		this.list = res.data.recommendList
						  		console.log(this.list)
						  	}  	
						  });
				   		this.title = sessionStorage.name;
				   		var mySwiper = new Swiper ('.swiper-container', {
						    direction: 'horizontal',
						    loop: true,
						    autoplay :true,
						    // 如果需要分页器
						    pagination: {
						      el: '.swiper-pagination',
						    },
				    
						    // 如果需要前进后退按钮
						    navigation: {
						      nextEl: '.swiper-button-next',
						      prevEl: '.swiper-button-prev',
						    },
			
						  })
				   	}
			
				})
			   
			  $.ajax({
			  	type:"get",
			  	url:"json/index.json",
			  	async:true,
			  	success:function(res){
			  		callback(res)
			  	}  	
			  });
			  function callback(data){
			  	var datas = data.data.swiperList;
			  	  var newstr = "";
			  	  $.each(datas,function(i,v){
			  	  	 newstr += `
			  	  	 <div class="swiper-slide">
			        	<img src=${v.imgUrl} class="img"/>
			        </div>
			  	  	 `
			  	  })
			  	$(".swiper-wrapper").append(newstr);
			  	var datass = data.data.iconList;
			  	  var newstrs = "";
			  	$.each(datass,function(i,v){
			  		newstrs +=`
			  		   <dl>
					   	   	<dt><img src=${v.imgUrl}></dt>
					   	   	<dd>${v.desc}</dd>
				   	   </dl>
			  		`
			  	})
			  	$(".clas").append(newstrs)
//			  var datasss = data.data.recommendList;
//			  var newstrss = "";
//			  $.each(datasss,function(i,v){
//			  	newstrss += `
//			  	    <dl>
//			    		<dt><img src=${v.imgUrl}></dt>
//			    		<dd>
//			    			<h1>${v.title}</h1>
//			    			<p>${v.desc}</p>
//			    			<span>查看详情</span>
//			    		</dd>
//			    	</dl> 
//			  	`
//			  })
//			  $(".hots").append(newstrss)
			  var datassss = data.data.weekendList;
			  var newstrsss ="";
			     $.each(datassss,function(i,v){
			     	newstrsss += `
			     	    <dl>
				    		<dt><img src=${v.imgUrl}></dt>
				    		<dd>
				    			<p>${v.title}</p>
				    			<span>${v.desc}</span>
				    		</dd>
				    	</dl>
			     	`
			     })
			     $(".week").append(newstrsss)
			  }
			 
		</script>
	
		<script>
			
		</script>
	</body>
</html>
